<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/third.css">
    <style>

    </style>
</head>

<body>
    <div class="nav-all">
        <div class="nav-second">
            <a href="#" class="logo">
                <img src="img/logo.svg" alt="">
            </a>
            <ul class="main-nav">
                <li class="main-nav-item">
                    <a href="" class="main-nav-link">手机</a>
                </li>
                <li class="main-nav-item">
                    <a href="" class="main-nav-link">笔记本</a>
                </li>
                <li class="main-nav-item">
                    <a href="" class="main-nav-link">平板</a>
                </li>
                <li class="main-nav-item">
                    <a href="" class="main-nav-link">智慧屏</a>
                </li>
                <li class="main-nav-item">
                    <a href="" class="main-nav-link">穿戴</a>
                </li>
                <li class="main-nav-item">
                    <a href="" class="main-nav-link">音频</a>
                </li>
                <li class="main-nav-item">
                    <a href="" class="main-nav-link">更多产品</a>
                </li>
                <li class="main-nav-item">
                    <a href="" class="main-nav-link">EMUL11</a>
                </li>
                <li class="main-nav-item">
                    <a href="" class="main-nav-link">服务支持</a>
                </li>
                <li class="main-nav-item">
                    <a href="" class="main-nav-link">零售店</a>
                </li>
                <li class="main-nav-item">
                    <a href="" class="main-nav-link">商用</a>
                </li>
            </ul>

            <div class="nav-addons">
                <button class="button-search">
                    <img src="img/搜索.png" alt="">
                </button>
                <div class="nav-record">
                    <img src="img/登录.png" alt="">
                </div>
                <div class="nav-huawei">
                    <span class="font">华为商城</span>
                </div>
            </div>
        </div>
    </div>

    <div class="Carousel-all">
        <div class="Carousel-second">
            <div class="Carousel-background"></div>
        </div>
        <div class="container">
            <div class="container-first">
                <div class="container-srcond">
                    <span class="text-fist">HUAWEI Mate 40 Pro</span>
                    <div class="text-second">跃见非凡</div>
                    <p class="text-third">
                        HUAWEI Mate 40 Pro，科技缔造艺术之美；5 nm
                        <br>麒麟9000 5G SoC旗舰芯片，澎湃动力，一触即
                        <br>发；超感知徕卡电影影像，与光影同行；双超级快
                        <br>充，实力显而易见；EMUI 11，给你更多创新体验。
                    </p>
                    <div class="text-t">
                        <a href="" class="text-button1">了解更多</a>
                        <a href="" class="text-button2">购买￥6499起</a>
                    </div>

                    <div class="ul-button">
                        <div class="ul-swatches">

                            <div class="ul-swatches-all">
                                <div class="ul-first">
                                    <div class="ul-item">
                                        <button class="item-all item-button1  "></button>
                                    </div>
                                    <div class="ul-item">
                                        <button class="item-all item-button2 "></button>
                                    </div>
                                    <div class="ul-item">
                                        <button class="item-all item-button3"> </button>
                                    </div>
                                    <div class="ul-item">
                                        <button class="item-all item-button4"></button>
                                    </div>
                                    <div class="ul-item ">
                                        <button class="item-all item-button5"></button>
                                    </div>
                                </div>
                                <div class="item-tab">
                                    <div class="item-li" style="display:block">秘银色</div>
                                    <div class="item-li">釉白色</div>
                                    <div class="item-li">亮黑色</div>
                                    <div class="item-li">夏日胡杨</div>
                                    <div class="item-li">秋日胡杨</div>
                                </div>
                            </div>
                            <script src="../pc/js/jquery-3.6.0.min.js"></script>
                            <script>
                                $(function () {
                                    var imgs = ['img/silver2.png', 'img/white.png', 'img/black1.png', 'img/green.png', 'img/yellow.png']
                                    var imgs2 = ['img/right1.png', 'img/right2.png', 'img/right3.png', 'img/right4.png', 'img/right5.png']
                                    $('.ul-first button').click(function () {
                                        console.log($(this).parent().index());
                                        $(this).addClass('item-button1').siblings()
                                            .removeClass('item-button1');
                                        $('.item-li').eq($(this).parent().index()).show()
                                            .siblings().hide();

                                        $('.a-div-img1').attr('src', imgs[$(this).parent().index()])

                                        $('.a-div-img2').attr('src', imgs2[$(this).parent().index()])
                                    });
                                });
                            </script>
                        </div>
                    </div>
                </div>
                <a href="" title="跃见非凡" class="a-all">
                    <div class="a-product">
                        <div class="div-product1">
                            <div class=" a-div-product1">
                                <img src="img/silver2.png" alt="" class="a-div-img1">
                            </div>
                            <div class="a-div-product2">
                                <img src="img/right1.png" alt="" class="a-div-img2">
                            </div>
                        </div>


                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="products-list">
        <div class="list-title">
            <div class="title-all">
                <div class="all-first">
                    <div class="wrap">
                        <div class="wrap-1">
                            <div title="智能手机" class="div-head1">智能手机</div>
                            <div class="div-head2">
                                <a href="" class="head-a">产品对比</a>
                            </div>
                        </div>
                        <div class="wrap-2">
                            <div class="div-choice">
                                <div class="choice-1">
                                    <button title="筛选" class="screen"> 筛选
                                    </button>
                                    <button title="重置" class="Reset"> 重置</button>
                                </div>
                                <div class="choice-2">
                                    <div class="tags2">
                                        <div class="tags2-1" style="display:block">
                                            <div class="tags-div">
                                                <div class="tags-button">
                                                    <button class="tags-button-1">重置</button>
                                                </div>

                                                <div class="tags-list">

                                                    <div class="tags-list-wrap">
                                                        <div class="tags-wrap">系列</div>
                                                        <ul class="list-wrap">
                                                            <li class="list-wrap-item" data-index="0">
                                                                <a href="" class="item-name"> HUAWEI Mate系列</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="1">
                                                                <a href="" class="item-name" H>UAWEI P 系列</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="2">
                                                                <a href="" class="item-name">HUAWEI nova系列</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="3">
                                                                <a href="" class="item-name">华为畅享系列</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="4">
                                                                <a href="" class="item-name">华为麦芒系列</a>
                                                            </li>
                                                        </ul>
                                                    </div>

                                                    <div class="tags-list-wrap">
                                                        <div class="tags-wrap">价格</div>
                                                        <ul class="list-wrap">
                                                            <li class="list-wrap-item" data-index="5">
                                                                <a href="" class="item-name">0-999</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="6">
                                                                <a href="" class="item-name">1000-1999</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="7">
                                                                <a href="" class="item-name">2000-3999</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="8">
                                                                <a href="" class="item-name">4000-5999</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="9">
                                                                <a href="" class="item-name">6000及以上</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="tags-list-wrap">
                                                        <div class="tags-wrap">储存容量</div>
                                                        <ul class="list-wrap">
                                                            <li class="list-wrap-item" data-index="10">
                                                                <a href="" class="item-name">64GB</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="11">
                                                                <a href="" class="item-name">128GB</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="12">
                                                                <a href="" class="item-name">256GB</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="tags-list-wrap">
                                                        <div class="tags-wrap">是否支持5G</div>
                                                        <ul class="list-wrap">
                                                            <li class="list-wrap-item" data-index="13">
                                                                <a class="item-name" href="javascript:;">不支持</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="14">
                                                                <a class="item-name" href="javascript:;">支持</a>
                                                            </li>

                                                        </ul>
                                                    </div>
                                                    <div class="tags-list-wrap">
                                                        <div class="tags-wrap">其他功能</div>
                                                        <ul class="list-wrap">
                                                            <li class="list-wrap-item" data-index="15">
                                                                <a class="item-name" href="javascript:;">NFC</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="16">
                                                                <a class="item-name" href="javascript:;">40W及以上超级快充</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="17">
                                                                <a class="item-name" href="javascript:;">徕卡摄像头</a>
                                                            </li>
                                                            <li class="list-wrap-item" data-index="18">
                                                                <a class="item-name" href="javascript:;">防水</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <script>
                                        $(function () {
                                            $('.choice-1 button').click(function () {
                                                $('.choice-2').slideToggle();
                                            })
                                        })
                                    </script><button class="choice3-button"></button>
                                </div>

                                <script>
                                    $(function () {
                                        $('.choice3-button').click(function () {
                                            $('.choice-2').hide()
                                        })
                                    })
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="list-title1">
            <div class="title1-first">
                <div class="container2">
                    <div class="wrap">
                        <div class="wrap-row">

                            <div class="row-div1 aa">
                                <div class="div1-1">
                                    <div class="row-1">
                                        <span class="product-block__background" style="background-color: rgb(241, 246, 254);"></span>
                                        <div class="row-info">
                                            <span class="info-span">最新</span>
                                        </div>
                                        <div class="row-holder">
                                            <a href="" class="row-img">
                                                <img src="img/face.png" alt="" class="row-img1">
                                                <img src="img/silver.png" alt="" class="row-img2">
                                            </a>
                                        </div>
                                        <div class="row-swatches">
                                            <div class="color-swatches">
                                                <div class="swatches-wrapper">
                                                    <div class="ul-first">
                                                        <div class="ul-item">
                                                            <button class="item-all item-button1  "></button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button2 "></button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button3"> </button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button4"></button>
                                                        </div>
                                                        <div class="ul-item ">
                                                            <button class="item-all item-button5"></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row-2">
                                        <div class="row-title">
                                            <a href="" class="row-title-link">HUAWEI Mate 40 Pro</a>
                                        </div>
                                        <div class="row-text-in">
                                            <p class="row-text">麒麟 9000 5G SoC 芯片，体验震撼超前</p>
                                            <p class="row-text">超感知徕卡电影影像，硬件实时视频 HDR</p>
                                            <p class="row-text">66 W 有线超级快充，50 W 无线超级快充</p>
                                        </div>
                                        <div class="row-btns">
                                            <a href="" class="a-arrow">了解更多</a>
                                            <button class="a-arrow">购买￥6499 起</button>
                                        </div>
                                        <div></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-div2 aa">

                                <div class="div1-1">
                                    <div class="row-1">
                                        <div class="row-info">
                                            <span class="info-span">最新</span>
                                        </div>
                                        <div class="row-holder">
                                            <a href="" class="row-img-1">
                                                <img src="img/img-blue-v1.png" alt="" class="row-img3">
                                            </a>
                                        </div>
                                        <div class="row-swatches">
                                            <div class="color-swatches">
                                                <div class="swatches-wrapper">
                                                    <div class="ul-first">
                                                        <div class="ul-item">
                                                            <button class="item-all item-button7  "></button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button6 "></button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button1"> </button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button3"></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-2">
                                        <div class="row-title">
                                            <a href="" class="row-title-link">HUAWEI Mate X2</a>
                                        </div>
                                        <div class="row-text-in">
                                            <p class="row-text">重心偏移设计，锋锐纤薄机身</p>
                                            <p class="row-text">8:7.1 折叠屏黄金显示比例，沉浸纯粹</p>
                                            <p class="row-text">麒麟 9000 5G SoC 芯片，体验震撼超前</p>
                                        </div>
                                        <div class="row-btns">
                                            <a href="" class="a-arrow">了解更多</a>
                                            <button class="a-arrow">购买￥6499 起</button>
                                        </div>
                                        <div></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-div3 aa">
                                <div class="div1-1">
                                    <div class="row-1">
                                        <div class="row-info">
                                            <span class="info-span">最新</span>
                                        </div>
                                        <div class="row-holder">
                                            <a href="" class="row-img-1">
                                                <img src="img/white-listimg.png" alt="" class="row-img4">
                                            </a>
                                        </div>
                                        <div class="row-swatches">
                                            <div class="color-swatches">
                                                <div class="swatches-wrapper">
                                                    <div class="ul-first">
                                                        <div class="ul-item">
                                                            <button class="item-all item-button2  "></button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button3"> </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-2">
                                        <div class="row-title">
                                            <a href="" class="row-title-link">HUAWEI Mate 40 Pro+</a>
                                        </div>
                                        <div class="row-text-in">
                                            <p class="row-text">纳米微晶陶瓷机身，88° 超曲环幕屏</p>
                                            <p class="row-text">麒麟 9000 5G SoC 芯片，体验震撼超前</p>
                                            <p class="row-text">超感知徕卡电影影像，硬件实时视频 HDR</p>

                                        </div>
                                        <div class="row-btns">
                                            <a href="" class="a-arrow aa">了解更多</a>
                                            <button class="a-arrow">购买￥6499 起</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-div4 aa">
                                <div class="div1-1">
                                    <div class="row-1">
                                        <div class="row-info">
                                            <span class="info-span">最新</span>
                                        </div>
                                        <div class="row-holder">
                                            <a href="" class="row-img-1">
                                                <img src="img/white-listimg (1).png" alt="" class="row-img4">
                                            </a>
                                        </div>
                                        <div class="row-swatches">
                                            <div class="color-swatches">
                                                <div class="swatches-wrapper">
                                                    <div class="ul-first">
                                                        <div class="ul-item">
                                                            <button class="item-all item-button2  "></button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button3"> </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-2">
                                        <div class="row-title">
                                            <a href="" class="row-title-link">HUAWEI Mate 40 RS 保时捷设计</a>
                                        </div>
                                        <div class="row-text-in">
                                            <p class="row-text">标识性动感飞线设计</p>
                                            <p class="row-text">麒麟 9000 5G SoC 芯片，澎湃性能超越不止</p>
                                            <p class="row-text">超感知徕卡电影五摄，10 倍光学变焦</p>

                                        </div>
                                        <div class="row-btns">
                                            <a href="" class="a-arrow aa">了解更多</a>
                                            <button class="a-arrow">购买￥6499 起</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-div5">
                                <div class="div1-1">
                                    <div class="row-1">
                                        <div class="row-info">
                                            <span class="info-span">最新</span>
                                        </div>
                                        <div class="row-holder">
                                            <a href="" class="row-img-1">
                                                <img src="img/mystic-silver-listimg.png" alt="" class="row-img4">
                                            </a>
                                        </div>
                                        <div class="row-swatches">
                                            <div class="color-swatches">
                                                <div class="swatches-wrapper">
                                                    <div class="ul-first">
                                                        <div class="ul-item">
                                                            <button class="item-all item-button1  "></button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button2 "></button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button3"> </button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button4"></button>
                                                        </div>
                                                        <div class="ul-item ">
                                                            <button class="item-all item-button5"></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-2">
                                        <div class="row-title">
                                            <a href="" class="row-title-link">HUAWEI Mate 40 RS 保时捷设计</a>
                                        </div>
                                        <div class="row-text-in">
                                            <p class="row-text">标识性动感飞线设计</p>
                                            <p class="row-text">麒麟 9000 5G SoC 芯片，澎湃性能超越不止</p>
                                            <p class="row-text">超感知徕卡电影五摄，10 倍光学变焦</p>

                                        </div>
                                        <div class="row-btns">
                                            <a href="" class="a-arrow aa">了解更多</a>
                                            <button class="a-arrow">购买￥6499 起</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-div5">
                                <div class="div1-1">
                                    <div class="row-1">
                                        <div class="row-info">
                                            <span class="info-span">最新</span>
                                        </div>
                                        <div class="row-holder">
                                            <a href="" class="row-img">
                                                <img src="img/mystic-silver-listimg.png" alt="" class="row-img4">
                                            </a>
                                        </div>
                                        <div class="row-swatches">
                                            <div class="color-swatches">
                                                <div class="swatches-wrapper">
                                                    <div class="ul-first">
                                                        <div class="ul-item">
                                                            <button class="item-all item-button2  "></button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button3"> </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-2">
                                        <div class="row-title">
                                            <a href="" class="row-title-link">HUAWEI Mate 40 RS 保时捷设计</a>
                                        </div>
                                        <div class="row-text-in">
                                            <p class="row-text">标识性动感飞线设计</p>
                                            <p class="row-text">麒麟 9000 5G SoC 芯片，澎湃性能超越不止</p>
                                            <p class="row-text">超感知徕卡电影五摄，10 倍光学变焦</p>

                                        </div>
                                        <div class="row-btns">
                                            <a href="" class="a-arrow aa">了解更多</a>
                                            <button class="a-arrow">购买￥6499 起</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-div5">
                                <div class="div1-1">
                                    <div class="row-1">
                                        <div class="row-info">
                                            <span class="info-span">最新</span>
                                        </div>
                                        <div class="row-holder">
                                            <a href="" class="row-img">
                                                <img src="img/mystic-silver-listimg.png" alt="" class="row-img4">
                                            </a>
                                        </div>
                                        <div class="row-swatches">
                                            <div class="color-swatches">
                                                <div class="swatches-wrapper">
                                                    <div class="ul-first">
                                                        <div class="ul-item">
                                                            <button class="item-all item-button2  "></button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button3"> </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-2">
                                        <div class="row-title">
                                            <a href="" class="row-title-link">HUAWEI Mate 40 RS 保时捷设计</a>
                                        </div>
                                        <div class="row-text-in">
                                            <p class="row-text">标识性动感飞线设计</p>
                                            <p class="row-text">麒麟 9000 5G SoC 芯片，澎湃性能超越不止</p>
                                            <p class="row-text">超感知徕卡电影五摄，10 倍光学变焦</p>

                                        </div>
                                        <div class="row-btns">
                                            <a href="" class="a-arrow aa">了解更多</a>
                                            <button class="a-arrow">购买￥6499 起</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            ` <div class="row-div5">
                                <div class="div1-1">
                                    <div class="row-1">
                                        <div class="row-info">
                                            <span class="info-span">最新</span>
                                        </div>
                                        <div class="row-holder">
                                            <a href="" class="row-img">
                                                <img src="img/mystic-silver-listimg.png" alt="" class="row-img4">
                                            </a>
                                        </div>
                                        <div class="row-swatches">
                                            <div class="color-swatches">
                                                <div class="swatches-wrapper">
                                                    <div class="ul-first">
                                                        <div class="ul-item">
                                                            <button class="item-all item-button2  "></button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button3"> </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-2">
                                        <div class="row-title">
                                            <a href="" class="row-title-link">HUAWEI Mate 40 RS 保时捷设计</a>
                                        </div>
                                        <div class="row-text-in">
                                            <p class="row-text">标识性动感飞线设计</p>
                                            <p class="row-text">麒麟 9000 5G SoC 芯片，澎湃性能超越不止</p>
                                            <p class="row-text">超感知徕卡电影五摄，10 倍光学变焦</p>

                                        </div>
                                        <div class="row-btns">
                                            <a href="" class="a-arrow aa">了解更多</a>
                                            <button class="a-arrow">购买￥6499 起</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-div5">
                                <div class="div1-1">
                                    <div class="row-1">
                                        <div class="row-info">
                                            <span class="info-span">最新</span>
                                        </div>
                                        <div class="row-holder">
                                            <a href="" class="row-img">
                                                <img src="img/mystic-silver-listimg.png" alt="" class="row-img4">
                                            </a>
                                        </div>
                                        <div class="row-swatches">
                                            <div class="color-swatches">
                                                <div class="swatches-wrapper">
                                                    <div class="ul-first">
                                                        <div class="ul-item">
                                                            <button class="item-all item-button2  "></button>
                                                        </div>
                                                        <div class="ul-item">
                                                            <button class="item-all item-button3"> </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-2">
                                        <div class="row-title">
                                            <a href="" class="row-title-link">HUAWEI Mate 40 RS 保时捷设计</a>
                                        </div>
                                        <div class="row-text-in">
                                            <p class="row-text">标识性动感飞线设计</p>
                                            <p class="row-text">麒麟 9000 5G SoC 芯片，澎湃性能超越不止</p>
                                            <p class="row-text">超感知徕卡电影五摄，10 倍光学变焦</p>

                                        </div>
                                        <div class="row-btns">
                                            <a href="" class="a-arrow aa">了解更多</a>
                                            <button class="a-arrow">购买￥6499 起</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>